<template>
  <div class="houseconfig">
    <div class="houseleft">
      <div class="housecenter">
        <div class="title">房屋</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="houseright">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="125px"
        label-position="right"
      >
        <el-form-item label="房屋主区域配置：" prop="systemConfigHouseVos">
          <div
            class="checkGroup"
            v-for="(item, index) in ruleForm.systemConfigHouseVos"
            :key="index"
          >
            <el-select
              v-model="item.floorSpaceCode"
              placeholder="请选择"
              class="te"
            >
              <el-option
                v-for="item in areaScopeList"
                :key="item.areaScopeCode"
                :label="item.areaScopeName"
                :value="item.areaScopeCode"
              >
              </el-option>
            </el-select>
            <span>面积</span>
            <el-select v-model="item.houseBedroom" placeholder="请选择">
              <el-option
                v-for="(item, index) in numMap"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <span>室</span>

            <el-select v-model="item.houseHall" placeholder="请选择">
              <el-option
                v-for="(item, index) in numMap"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <span>厅</span>

            <el-select v-model="item.houseKitchen" placeholder="请选择">
              <el-option
                v-for="(item, index) in numMap"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <span>厨</span>

            <el-select v-model="item.houseToilef" placeholder="请选择">
              <el-option
                v-for="(item, index) in numMap"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
            <span>卫</span>

            <el-button
              style="background-color:#fd804c;color: #fff;width:30px;height:30px;margin-left:5px;display: flex;
              justify-content: center;align-items: center;"
              icon="el-icon-plus"
              v-if="index === 0"
              @click="addItem"
            >
            </el-button>
            <el-button
              icon="el-icon-minus"
              style="background-color:#fd804c;color: #fff;width:30px;height:30px;margin-left:5px;display: flex;
              justify-content: center;align-items: center;"
              v-if="index != 0"
              @click="deleteItem(index)"
            >
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="houserightbehind">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    systemConfigHouseVos: {
      type: Array,
      required: false
    }
  },
  data() {
    const numMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const validateSystemConfigHouseVos = (rule, value, callback) => {
      value.forEach(item => {
        const floorSpaceCode = item.floorSpaceCode;
        const houseBedroom = item.houseBedroom;
        const houseHall = item.houseHall;
        const houseKitchen = item.houseKitchen;
        const houseToilef = item.houseToilef;
        if (
          floorSpaceCode === "" ||
          houseBedroom === "" ||
          houseHall === "" ||
          houseKitchen === "" ||
          houseToilef === ""
        ) {
          callback(new Error("请将房屋主区域配置填写完整"));
        }
      });
      callback();
    };
    return {
      numMap,
      areaScopeList: [],

      ruleForm: {
        systemConfigHouseVos: [
          {
            configType: "system_config_house",
            floorSpaceCode: "",
            houseBedroom: "",
            houseHall: "",
            houseKitchen: "",
            houseToilef: ""
          }
        ]
      },
      rules: {
        systemConfigHouseVos: [
          { validator: validateSystemConfigHouseVos, trigger: "change" }
        ]
      }
    };
  },
  methods: {
    async fetchAreaScopeList() {
      const { data } = await this.$http({
        url: "/hsssystemadmin/config/system/fetchAreaScopeList",
        method: "post"
      });
      this.areaScopeList = data;
    },
    addItem() {
      this.ruleForm.systemConfigHouseVos.push({
        configType: "system_config_house",
        floorSpaceCode: "",
        houseBedroom: "",
        houseHall: "",
        houseKitchen: "",
        houseToilef: ""
      });
    },
    deleteItem(index) {
      this.ruleForm.systemConfigHouseVos.splice(index, 1);
    },
    async save() {
      this.$refs["ruleForm"].validate(async valid => {
        if (valid) {
          const systemConfigHouseVos = this.ruleForm.systemConfigHouseVos.map(
            item => {
              const obj = {};
              obj.configType = item.configType;
              obj.floorSpaceCode = item.floorSpaceCode;
              obj.houseBedroom = item.houseBedroom;
              obj.houseHall = item.houseHall;
              obj.houseKitchen = item.houseKitchen;
              obj.houseToilef = item.houseToilef;
              if (item.id) {
                obj.id = item.id;
              }
              if (item.areaHouseCode) {
                obj.areaHouseCode = item.areaHouseCode;
              }
              return obj;
            }
          );
          const data = {
            systemConfigHouseVos
          };
          debugger;
          await this.$http({
            url: "/hsssystemadmin/config/system/updateSystemConfig",
            method: "POST",
            data
          }).then(res => {
            this.$message.success("房屋基础配置保存成功");
            this.$emit("research");
          });
        } else {
          this.$message.error("校验不通过，请重新填写");
        }
      });
    }
  },
  mounted() {
    this.fetchAreaScopeList();
  },
  watch: {
    systemConfigHouseVos(newvalue) {
      if (newvalue && newvalue.length != 0) {
        this.ruleForm.systemConfigHouseVos = newvalue;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.houseconfig {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .houseleft {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .housecenter {
      width: 100px;
      height: 70px;
      .title {
        width: 100%;
        height: 35px;
        background-color: #f56a23;
        font-size: 22px;
        color: #fff;
        line-height: 35px;
        text-align: center;
      }
      .baseconfig {
        width: 100%;
        height: 35px;
        font-size: 22px;
        line-height: 35px;
        text-align: center;
        color: #aaa;
      }
    }
  }
  .houseright {
    background-color: #fff;
    min-height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    /deep/ .el-form-item__label {
      font-size: 12px;
    }
    .checkGroup {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-size: 12px;
      span {
        display: block;
        height: 30px;
      }
    }
    .checkGroup .el-select {
      display: block;
      width: 60px;
      height: 30px;
      margin-right: 5px;
      margin-left: 5px;
      /deep/ .el-input {
        height: 30px;
        line-height: 30px;
      }
      /deep/ .el-input__inner {
        font-size: 12px;
        height: 30px;
      }
      /deep/ .el-icon-arrow-up {
        line-height: 30px;
      }
    }
    .checkGroup .el-select.te {
      width: 110px;
    }
  }
  .houserightbehind {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .save {
      width: 70px;
      height: 40px;
      font-size: 22px;
      color: #fff;
      background-color: #00cb75;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
}
</style>
